import React, { useEffect, useState } from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { detail } from '@/services/order/api'
import { Link, history } from 'umi'
import { Form, Menu, Dropdown, Button, Descriptions,Skeleton } from 'antd';
import { UploadOutlined, EllipsisOutlined } from '@ant-design/icons';

class OrderDetail extends React.Component {

    state = {
        loading: true,
        detail: {},
    };

    async componentDidMount() {
        await this.init();
        console.log("init end")
    }

    init = async () => {
        try {
            const { data } = await detail(history.location.query);
            this.setState({ loading: false, detail: data })
            console.log(data)
        } catch (error) {
            console.log(error)
        }
    };

    render() {
        console.log(this.state)
        return (
            <PageContainer loading={this.state.loading} title={"hello"} header={{
                title: `单号：${this.state.detail.id}`,
                ghost: true,
                breadcrumb: {
                    routes: [
                        {
                            path: '',
                            breadcrumbName: '一级页面',
                        },
                        {
                            path: '',
                            breadcrumbName: '二级页面',
                        },
                        {
                            path: '',
                            breadcrumbName: '当前页面',
                        },
                    ],
                },
                extra: [
                    <Button key="1">次要按钮</Button>,
                    <Button key="2">次要按钮</Button>,
                    <Button key="3" type="primary">
                        主要按钮
                    </Button>,
                    <Dropdown
                        key="dropdown"
                        trigger={['click']}
                        overlay={
                            <Menu>
                                <Menu.Item key="1">下拉菜单</Menu.Item>
                                <Menu.Item key="2">下拉菜单2</Menu.Item>
                                <Menu.Item key="3">下拉菜单3</Menu.Item>
                            </Menu>
                        }
                    >
                        <Button key="4" style={{ padding: '0 8px' }}>
                            <EllipsisOutlined />
                        </Button>
                    </Dropdown>,
                ],
            }}
                content={
                    this.state.detail.id == undefined ? <Skeleton></Skeleton> :
                    <Descriptions column={2} style={{ marginBottom: -16 }}>
                        <Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
                        <Descriptions.Item label="关联表单">
                            <a>421421</a>
                        </Descriptions.Item>
                        <Descriptions.Item label="创建时间">{this.state.detail.created_at}</Descriptions.Item>
                        <Descriptions.Item label="单据备注">浙江省杭州市西湖区工专路</Descriptions.Item>
                    </Descriptions>
                }
            >
                <div>hello </div>
            </PageContainer>
        )
    }

}

export default OrderDetail
